<template>
  <div>
    <el-form label-width="auto" class="searchBarWrap">
      <!-- 单行布局 -->
      <el-row v-if="isSingleRow" :gutter="20">
        <slot name="query" />
        <el-col v-permission="permissionCode" :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
          <el-button type="primary" @click="handleQuery()">查询</el-button>
          <el-button @click="handleReset(true)">重置</el-button>
        </el-col>
      </el-row>
      <!-- 多行布局 -->
      <el-row v-else :gutter="20">
        <el-col :xs="24" :sm="24" :md="19" :lg="20" :xl="21">
          <div :class="{ searchBarHide: isStow }">
            <!-- 查询条件插槽 -->
            <slot name="query" />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="5" :lg="4" :xl="3" style="padding: 0">
          <!-- 查询栏超过2行需展示折叠按钮 -->
          <div class="collapseButtonWrap" :class="{ hidden1920: hidden1920 }" @click="isStow = !isStow">
            <i :class="{ 'el-icon-arrow-up': !isStow, 'el-icon-arrow-down': isStow }" />
          </div>
          <span v-permission="permissionCode">
            <el-button type="primary" @click="handleQuery()">查询</el-button>
            <el-button @click="handleQuery(true)">重置</el-button>
          </span>
        </el-col>
      </el-row>
    </el-form>
    <div class="mainTableWrap">
      <div class="mainTableWrap_buttonGroup">
        <!-- 表格上方按钮 新增、导出...插槽-->
        <slot name="button" />
      </div>
      <el-table v-loading="tableLoading" :data="tableData" :header-cell-style="{ background: '#eef1f6', color: '#606266' }">
        <el-table-column v-if="showIndex" label="序号" align="center" width="80">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 + (pagingParams.page - 1) * pagingParams.size }}</span>
          </template>
        </el-table-column>
        <!-- 列表项插槽 -->
        <slot name="column" />
      </el-table>
      <el-pagination
        v-if="showPaging"
        :total="tableTotal"
        background
        :current-page="pagingParams.page"
        layout="total,sizes, prev, pager,next,jumper"
        :page-size="pagingParams.size"
        @size-change="sizeChange"
        @current-change="pageChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    queryConfig: {
      //  查询栏参数配置
      type: Function,
      default: reset => {
        const query = reset ? {} : {};
        // if (reset) this.queryForm = params;
        return {
          api: undefined,
          params: query,
          callback: value => {}
        };
      }
      // 例如：
      // setQueryConfig(reset) {
      //   const params = reset ? { //true:重置表单，初始化默认值
      //     name: '',
      //     areaCode: ''
      //   } : formatQuery(this.queryForm); //false:格式化表单 比如处理数组等，不然接口会报错
      //   if (reset) this.queryForm = params;
      //   return {
      //     params
      //     // api:listQuery
      //     // callback: (value) => {}
      //   };
      // },
    },
    permissionCode: {
      // 查询按钮的权限码
      type: String,
      default: ''
    },
    isSingleRow: {
      //  默认布局：查询栏是否只有一行 （一般 <=3 个就只有一行）
      type: Boolean,
      default: false
    },
    showPaging: {
      // 是否展示分页组件
      type: Boolean,
      default: true
    },
    hidden1920: {
      // 是否在1920下隐藏折叠按钮  比如在xl查询栏是2行，在lg是3行这种场景 （一般8个查询条件的需要这个）
      type: [Boolean, String],
      default: false
    },
    showIndex: {
      // 是否显示表格序号
      type: Boolean,
      default: true
    },
    isImmediate: {
      // 是否在该组件挂载后直接请求列表，如否，则自行通过$ref触发
      type: Boolean,
      default: true
    }
  },
  // provide() {
  //   return {
  //     handleDelete: this.handleDelete
  //     getTableList:this.getTableList
  //   };
  // },
  data() {
    return {
      isStow: false,
      tableTotal: 0,
      tableLoading: true,
      tableData: [],
      pagingParams: {
        page: 1,
        size: 10
      }
    };
  },
  created() {
    if (this.isImmediate) {
      this.getTableList();
    }
  },
  methods: {
    // 获取列表
    getTableList(reset) {
      this.tableLoading = true;
      const { api, queryForm, callback } = this.queryConfig(reset);
      if (api) {
        api({ ...queryForm, ...this.pagingParams })
          .then(({ value, success }) => {
            if (success && value) {
              this.tableData = this.showPaging ? value.datas : value;
              this.tableTotal = this.showPaging ? value.totalRecords : 0;
              callback && callback(value);
            } else {
              this.tableData = [];
              this.tableTotal = 0;
            }
          })
          .finally(() => {
            this.tableLoading = false;
          });
      }
    },
    // 删除
    handleDelete(requestApi, query, callback) {
      requestApi(query).then(({ value, success }) => {
        if (success) {
          if (this.tableData.length === 1) {
            if (this.pagingParams.page > 1) {
              this.pagingParams.page--;
            }
          }
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          callback && callback(value);
          this.getTableList();
        }
      });
    },
    // 查询
    handleQuery(reset) {
      this.pagingParams.page = 1;
      this.getTableList(reset);
    },
    sizeChange(e) {
      this.pagingParams.size = e;
      this.getTableList();
    },
    pageChange(e) {
      this.pagingParams.page = e;
      this.getTableList();
    }
  }
};
</script>

<style lang="scss" scoped>
@media screen and (min-width: 1920px) {
  .hidden1920 {
    display: none !important;
  }
}
// 表格上方查询区域
.searchBarWrap {
  background-color: #fff;
  padding: 18px 16px 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 2%);
  // 折叠按钮
  .collapseButtonWrap {
    display: inline-block;
    user-select: none;
    color: rgba(0, 0, 0, 0.1);
    font-size: 18px;
    margin-top: -10px;
    margin-right: 10px;
    border-radius: 3px;
    cursor: pointer;
    i {
      transition: all 0.3s;
      &:hover {
        transform: scale(1.1);
        color: rgba(0, 0, 0, 0.5);
      }
    }
  }
  ::v-deep .el-form-item {
    margin-bottom: 12px !important;
  }
}

// 查询区域-折叠
.searchBarHide {
  height: 72px !important;
  overflow: hidden;
}

// 表格区域
.mainTableWrap {
  padding: 8px 16px 16px;
  box-sizing: border-box;
  background: #fff;
  margin-top: 6px;
  box-shadow: 0 10px 10px 0 rgb(0 0 0 / 2%);
  //表格上方按钮区域
  .mainTableWrap_buttonGroup {
    .el-button {
      margin-bottom: 8px;
    }
  }
}
</style>
